<!--管理员登录页面-->
<template>
  <div class="overall">
    <div class="content">
      <div class="content-left">
        <img
            src="../../assets/OIP-C.jpg"
            alt="翠·夏"
            style="width: 100%; height: 100%"
        />
      </div>
      <div class="content-right">
        <img
            src="../../assets/badge.jpg"
            alt="校徽"
            style="width: 80px; height: 80px"
        />
        <div class="content-right-all">
          <h2>管理员登录</h2>
          <div class="content-right-input">
            <form class="login-form">
              <span>用户名：</span>
              <br>
              <el-input
                v-model="username"
                style="width: 315px"
                placeholder="请输入用户名"
                @keydown.enter.native="logon"
              />
              <br />
              <span>密码：</span>
              <br>
              <el-input
                v-model="password"
                style="width: 315px"
                type="password"
                placeholder="请输入密码"
                show-password
                @keydown.enter.native="logon"
              />
              <br />
              <button @click="login">登录</button>
              <br />
              <button @click="back">返回</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// import axios from 'axios';
import router from '@/router';
import { ElMessage } from "element-plus";
import { ref } from 'vue';

const username = ref('')
const password = ref('')

const login = () => {
  console.log(username.value);
  fetch(
    `http://localhost:3000/TbRootController/getlogin?number=${username.value}&password=${password.value}`
  ).then(res=>res.json())
  .then((res) => {
    console.log(username.value);
      if (res.code == 200) {
          router.push({
            path: "/RootIndex",
          }); 
          let token = res.data.root_id;
          localStorage.setItem("token", token);
          console.log(localStorage.getItem("token"));
      } else {
        ElMessage({
          message: "用户名或密码错误",
          type: "error",
        });
        password.value = "";
      }
    });
};

const back = () => {
  router.push({
    path:'/userlogin'
  })
}
</script>

<style scoped>
.overall {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  margin-top: 30px;
  width: 1000px;
  height: 600px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  display: flex;
}

.login-container {
  border: 1px solid #ccc;
  padding: 20px;
  width: 300px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}
.content-right {
  padding-left: 100px;
  align-items: center;
  justify-content: center;
}

.content-right p {
  color: rgb(145,151,168);
  font-size: small;
}

.content-right img {
  padding-top: 20px;
}

.content-right-all {
  padding-top: 30px;
}

.content-right-input label {
  display: block;
  margin-bottom: 5px;
}

.content-right-input input {
  width: 300px;
  padding: 5px;
  margin-bottom: 20px;
}

.content-right-input button {
  width: 315px;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  margin-bottom: 10px;
}
</style>